<template>
    <LEchart class="w-100% h-100%" ref="chartRef" />
</template>

<script setup>
import LEchart from './l-echart/l-echart.vue'
import { ref, watch, onMounted } from 'vue'

// #ifdef MP
const echarts = require('./static/echarts.min')
// #endif

// #ifndef MP
import * as echarts from 'echarts'
// #endif

const props = defineProps({
  options: {
    type: Object,
    default: () => ({})
  }
})

const chartRef = ref(null)

const initData = async (data) => {
  if (!chartRef.value) return
    
    const myChart = await chartRef.value.init(echarts)
    myChart.setOption(data)
}

onMounted(()=>{
  setTimeout(() => {
     initData(props.options)
  }, 300);
})

watch(() => props.options, (newValue) => {
  if(Object.keys(newValue).length > 0) {
    initData(newValue)
  }
}, {
  deep: true,
  immediate:true
})

</script>

<style lang="scss" scoped></style>